<template>
	<view class="commodity">
		<!-- 单个商品组件 -->
		<view class="commodity-item" v-for="(item,index) in dataList" :key="index" @tap="goDetial(index)">
			<image :src="item.imgUrl" mode=""></image>
			<view class="commodity-content">
				<text class="commodity-name" style="font-size: 26rpx;">{{item.name}}</text>
				<view class="money">
					<text class="pprice">￥{{item.pprice}}</text>
					<text class="oprice">￥{{item.oprice}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from "../../common/api/request.js"
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	export default {
		props:{
			dataList:Array,
			// 商品类型
			cardTitle:String
		},
		data(){
			return{
				goodslist:[]
			}
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		methods:{
			goDetial(id){
				let newId = this.dataList[id].id
				$http.request({
					url:'/addGoodsBrowse',
					method:'POST',
					header:{
						token:true
					},
					data:{
						id:newId,
						imgUrl:this.dataList[id].imgUrl,
						name :this.dataList[id].name,
						pprice:this.dataList[id].pprice,
						oprice:this.dataList[id].oprice,
						sale:this.dataList[id].sale,
						shopType:this.cardTitle,
						userId:this.userInfo.id
					}
				}).then((res)=>{
					this.goodslist = res
					
				}).catch(()=>{
					uni.showToast({
						title:"请求失败了哦",
						icon:"error"
					})
				})
				let info = {
					id:newId,
					shopType:this.cardTitle,
				}
				uni.navigateTo({
					url:"/pages/detial/detial?info="+JSON.stringify(info)+""
				})
			}
		}
	}
</script>

<style scoped>
.commodity {
	width: 750rpx;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}
.commodity-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 375rpx;
	height: 400rpx;
}
image {
	width: 60%;
	height: 240rpx;
}
.money {
	display: flex;
	justify-content: center;
	align-items: center;
}

.pprice {
	font-size: 30rpx;
	color: red;
}
.oprice {
	font-size: 22rpx;
	color: #b8b8b8 ;
	text-decoration: line-through;
}
</style>